<template>
  <div class="home">
    <el-button type="primary" @click="handleAddClick">新增点位图标</el-button>
    <Map
      :layer-list="layerList"
      :center="center"
      :pointList="pointList"
      @markerClick="handleMarkerClick"
      @mapClick="handleMapClick"
      @deleteClick="handleDeleteClick"
      @updateClick="handleUpdateClick"
    >
    </Map>
  </div>
</template>
  
<script setup>
import { onMounted, reactive, toRefs } from "vue";
import Icon from "@/components/Icon.vue";
import Map from "@/components/Map.vue";
import http from "@/utils/http";
import { useRouter } from "vue-router";
const router = useRouter();

// 组件列表
const components = { Icon, Map };

const Data = reactive({
  pointList: [],
  areaId: 1,
  center: { lat: 28.674993, lng: 121.4077192 },
  layerList: [],
  selectedPosition: {},
});
const { pointList, center, layerList, selectedPosition } = toRefs(Data);
onMounted(() => {
  Data.areaId = router.currentRoute.value.query.areaId;
  init();
});
const init = () => {
  http.get("/point/ua/listPointsByAreaId?areaId=" + Data.areaId).then((res) => {
    Data.pointList = res.data;
  });
  http.get("/area/ua/getAreaById?id=" + Data.areaId).then((res) => {
    Data.center = { lat: res.data.latitude, lng: res.data.longitude };
  });
  http.get("/area/ua/listLayerByAreaId?areaId=" + Data.areaId).then((res) => {
    console.log(res.data);
    Data.layerList = res.data;
  });
};
const selectIcon = (item) => {
  console.log(item);
};
const handleMarkerClick = (item) => {
  console.log(item);
};
const handleMapClick = (item) => {
  console.log(item);
  Data.selectedPosition = item;
  console.log(Data.selectedPosition);
};
const handleDeleteClick = (item) => {};
const handleUpdateClick = (item) => {
  router.push({
    path: "/home/editPoint",
    query: { pointId: item.id },
  });
};
const handleAddClick = () => {
  router.push({
    path: "/home/editPoint",
    query: { areaId: Data.areaId },
  });
};
</script>
  